<template>
  <view class="page" v-if="loading">
    <view class="top-con">
      <view class="top-shop">
        <image :src="showImg+obj.data.poster_img" mode="" class="img"></image>
        <view class="shop-right">
          <view class="title">{{ obj.data.activity_sponsor.name }}</view>
          <view class="flex-1">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-25.svg" mode=""></image>
            {{ obj.data.start_date }}
          </view>
          <view class="flex-1" v-if="obj.data.province">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-24.svg" mode=""></image>
            {{ obj.data.province + '-' + obj.data.city }}
          </view>
          <view class="status"> 报名结束时间：{{ countdown.days }}天 {{ countdown.hours }}小时 {{ countdown.minutes }}分钟 {{
            countdown.seconds }}秒 </view>
          <view class="flex-1">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-27.png" mode=""></image>
            {{ obj.data.activity_set_refund.desc }}
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-26.svg" mode=""
              style="margin-left: 24rpx"></image>
            {{ obj.activity_format[obj.data.activity_format] }}
          </view>
          <view class="type-1" v-if="!obj.data.vip_price && !obj.data.price">免费</view>
          <view class="type-2" v-else><span>vip {{ obj.data.vip_price ? obj.data.vip_price : '免费' }}</span> ￥{{
            obj.data.price || "0" }}</view>
          <view class="eyes-box">
            <image src="https://www.atuanjian.com/appletStatic/static/images/u-02.png" mode=""></image>
            {{ obj.data.hit }}
          </view>
        </view>
      </view>
      <view class="xian"></view>
      <view class="top-address" v-if="obj.data.province">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-28.svg" mode=""></image>
        {{ obj.data.province + obj.data.city + obj.data.county + obj.data.address }}
      </view>
    </view>
    <view class="top-con" style="margin-top: 28rpx">
      <view class="top-shop">
        <!-- <image src="https://www.atuanjian.com/appletStatic/static/images/u-29.svg" mode="" class="img-1"></image> -->
        <image :src="showImg+obj.data.activity_sponsor.logo" mode="" class="img-1"></image>
        <view class="shop-right">
          <view class="s-title">{{ obj.data.activity_sponsor.name }}</view>
          <view class="flex-1">
            <span>主办单位</span>
            <p>共有{{ obj.data.activity_sponsor.activity_count }}个活动</p>
            <p>浏览{{ obj.data.hit }}</p>
          </view>
        </view>
      </view>
    </view>
    <view class="top-con" style="margin-top: 28rpx">
      <view class="tip-box">
        <view class="tip-nav"></view>活动详情
      </view>
      <view class="content">
        <u-parse :content="obj.data.details"></u-parse>
      </view>
    </view>
    <view class="top-con" style="margin-top: 28rpx">
      <view class="tip-box">
        <view class="tip-nav"></view>活动须知
      </view>
      <view class="content">
        {{ obj.data.notice }}
      </view>
    </view>
    <view class="kong"></view>
    <view class="bottom-flex">
      <block>
        <view class="btn-save previous" @click="handleReduce" style="margin-right: 30rpx">上一步</view>
        <view class="btn-save previous" @click="handleAdd">确认发布</view>
      </block>
    </view>
  </view>
</template>

<script>
import { getActivityDetail, arraign } from "@/utils/request.js";
export default {
  data() {
    return {
      form: {
        is_get_my_data: true,
        id: '',
      },
      showImg: this.$config.showImgApi,
      obj: {},
      loading: false,
      countdown: {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      }
    };
  },
  onLoad(option) {
    this.form.id = option.id || 13
    this.getDetil()
  },
  methods: {
    async arraign(data) {
      return await arraign(data);
    },
    handleReduce() {
      uni.navigateBack({ delta: 1 })
    },
    async getActivityDetail(data) {
      return await getActivityDetail(data);
    },
    startCountdown(end_date) {
      const endDate = new Date(end_date);
      const timer = setInterval(() => {
        const now = new Date();
        const delta = endDate - now;

        if (delta <= 0) {
          clearInterval(timer);
          this.countdown = {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0
          };
        } else {
          this.countdown = {
            days: Math.floor(delta / (1000 * 60 * 60 * 24)),
            hours: Math.floor((delta % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
            minutes: Math.floor((delta % (1000 * 60 * 60)) / (1000 * 60)),
            seconds: Math.floor((delta % (1000 * 60)) / 1000)
          };
        }
      }, 1000);
    },
    getDetil() {
      this.getActivityDetail(this.form).then(res => {
        if (res) {
          this.obj = res
          this.loading = true
          this.startCountdown(res.data.end_date)
        }
      })
    },
    handleAdd() {
      const data = { activity_id: this.form.id }
      console.log(data,'data')
      this.arraign(data).then(res => {
        console.log(res, 'res')
        if (res) {
          uni.showToast({
            title: '发布成功，等待审核',
            icon: 'success',
            mask: true
          })
          uni.removeStorageSync('activeStep')
          uni.removeStorageSync('setTicket')
          uni.removeStorageSync('setEnroll')
          setTimeout(() => {
            return uni.reLaunch({
              url: '/pagesB/release/release'
            })
          }, 1500)
        }
      })
      return;

    },
  },
  onShareAppMessage(res) {
    return {
      // title: this.details.title,
      // path: `/pagesB/release/activeDetail?id=${this.detailId}`,
      // imageUrl: this.banner[0].image
    };
  },
};
</script>

<style lang="scss">
.page {
  padding-bottom: 100rpx;
  /* 根据需要调整 */
}

.bottom {
  margin-top: 20rpx;
  /* 增加顶部间距 */
  width: 100%;
  height: 87rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  justify-content: space-between;

  .item {
    display: flex;
    font-size: 25rpx;
    position: relative;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 12rpx;
    }

    button {
      position: absolute;
      top: 0;
      left: 0;
      width: 88rpx;
      height: 84rpx;
      opacity: 0;
    }
  }

  .submit {
    width: 361rpx;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffb850;
    font-size: 25rpx;

    image {
      width: 30rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
  }
}

.vip {
  width: 98%;
  height: 69rpx;
  border-radius: 12rpx;
  margin: 60rpx auto 0;
  position: relative;
  background-image: linear-gradient(to right, #ffb850, #ff8e2c, #ff6206);
  font-size: 25rpx;
  display: flex;
  align-items: center;

  image {
    width: 177rpx;
    height: 129rpx;
    position: absolute;
    top: -36rpx;
    left: 60rpx;
  }

  .vip-title {
    margin-left: 276rpx;
    color: #ffffff;
  }
}

.top-con {
  width: 100%;
  background-color: #ffffff;
  padding: 30rpx 0;

  scroll-view {
    width: 92%;
    margin: 0 auto;

    .wrap {
      @include flex_style(flex-start, center, row nowrap);
      white-space: nowrap;

      .item {
        width: 60rpx;
        font-size: 24rpx;
        color: #333333;
        margin-right: 40rpx;

        image {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #ccc;
          margin-bottom: 20rpx;
        }
      }
    }
  }

  .xian {
    margin-top: 30rpx;
    width: 100%;
    height: 1rpx;
    background-color: #f2f2f2;
  }

  .img-1 {
    width: 94rpx;
    height: 94rpx;
  }

  .s-title {
    font-size: 28rpx;
  }

  .top-address {
    width: 92%;
    margin: 0 auto;
    padding-top: 30rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;

    image {
      width: 33rpx;
      height: 33rpx;
      margin-right: 24rpx;
    }
  }

  .content {
    width: 92%;
    margin: 30rpx auto 0;
    font-size: 23rpx;
  }

  .tip-box {
    padding: 16rpx 0;
    font-size: 33rpx;
    display: flex;

    .tip-nav {
      width: 15rpx;
      height: 49rpx;
      background-color: #f59a23;
      margin: 0 12rpx 0 45rpx;
    }
  }

  .top-shop {
    width: 92%;
    margin: 0 auto;
    display: flex;
    position: relative;

    .eyes-box {
      position: absolute;
      bottom: 20rpx;
      left: 20rpx;
      font-size: 20rpx;
      color: #fff;
      display: flex;
      align-items: center;

      image {
        width: 28rpx;
        height: 18rpx;
        margin-right: 8rpx;
      }
    }

    .img {
      width: 260rpx;
      height: 356rpx;
      border-radius: 12rpx;
    }

    .shop-right {
      flex: 1;
      margin-left: 16rpx;

      .title {
        font-size: 33rpx;
        @include word_over(2);
        height: 88rpx;
      }

      .flex-1 {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #555555;
        margin-top: 24rpx;

        span {
          font-size: 18rpx;
          color: #f59a23;
          padding: 3rpx 6rpx;
          border: 1rpx solid #f59a23;
          border-radius: 6rpx;
        }

        p {
          font-size: 18rpx;
          color: #555555;
          margin-left: 32rpx;
        }

        image {
          width: 28rpx;
          height: 28rpx;
          margin-right: 16rpx;
        }
      }

      .status {
        max-width: 335rpx;
        display: block;
        padding: 2rpx 8rpx;
        background-color: #f59a23;
        font-size: 19rpx;
        color: #ffffff;
        margin-top: 18rpx;
      }

      .type-1 {
        font-size: 27rpx;
        color: #333333;
        margin-top: 20rpx;
      }

      .type-2 {
        font-size: 25rpx;
        font-weight: bold;
        margin-top: 20rpx;

        span {
          background-image: linear-gradient(to right, #f59a23, #f2f2f2);
          font-size: 20rpx;
          font-style: italic;
          margin-right: 20rpx;
          padding: 2rpx 10rpx;
        }
      }
    }
  }
}

.bottom-flex {
  width: 100%;
  height: 105rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;

  .btn-save {
    width: 694rpx;
    height: 65rpx;
    background-color: #FFB850;
    border-radius: 62rpx;
    font-size: 25rpx;
    color: #ffffff;
    text-align: center;
    line-height: 65rpx;
  }

  .previous {
    width: 326rpx;
  }
}
</style>
